@import "../../style/modules/function";

@keyframes slideUp {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes fadeShow {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.modal {
    display: none;
    font-size: rpx(30);
    align-items: flex-end;
    background-color: rgba(0, 0, 0, 0);
    z-index: 100;

    &.modal-show {
        display: flex;
    }

    .modal-wrapper {
        background-color: #fff;
        //min-height: 50vh;
        max-height: 95vh;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    $header-height: rpx(90);

    .modal-header {
        position: relative;
        height: $header-height;
        display: flex;
        align-items: center;
        border-bottom: 0.5px solid #bbb;
        font-size: rpx(35);
        padding-left: rpx(30);

        .close {
            position: absolute;
            cursor: pointer;
            right: 0;
            top: 0;
            font-size: rpx(35);
            width: $header-height;
            height: $header-height;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .modal-body {
        padding: 0;
        flex: 1;
        max-height: calc(95vh - #{$header-height});
        min-height: 0;
    }
}
